/* General */

* {
	padding: 0;
	margin: 0;
}

html {
	background: #fff;
	color: #000;
}	

body,
textarea,
.title em {
	font: 13px Arial !important;
}

a {
	color: #1461cc;
}

	a:hover {
		color: #cc1414;
	}


/* Combined */

.user,
#notification,
#lists p>em {
	font: 11px Verdana;
}

#notification a {
	text-decoration: none;
	border-bottom: 1px dotted;
}

h1,
.user a {
	text-indent: 500px;
	overflow: hidden;
}

.user a,
#lists .drag,
#lists .editing .edit button em,
.person,
.check {
	background: url(icons.png) no-repeat;
}

.inpad,
article {
	width: 760px;
	margin: 0 auto;
}

#lists li {
	list-style: none;
}

#lists li,
#lists .title {
	clear: both;
}


/* Content */

header {
	background: #1a1a1a;
}

	h1 {
		background: url(logo.png) no-repeat center 5px;
		display: block;
		width: 75px;
		height: 40px;
	}
	
	.user {
		float: right;
		line-height: 40px;
		height: 40px;
		color: #fff;
	}
	
		.user a {
			background-position: 0px 0px;
			margin-bottom: -6px;
			display: inline-block;
			width: 20px;
			height: 20px;	
			opacity: .5;
		}	
		
			.user a:hover {
				opacity: .8;
			}
	
article {
	padding: 60px 0;
}
		
#notification {
	position: absolute;
	width: 100%;
	top: 40px;
	left: 0;
	z-index: 10;
}

	#notification .message {
		position: relative;
		left: 50%;
		float: left;
	}
	
	#notification .message p {
		background: #ffee99;
		position: relative;
		right: 50%;
		float: left;
		padding: 10px 20px;
		
		-webkit-border-bottom-right-radius: 2px;
		-webkit-border-bottom-left-radius: 2px;
		-moz-border-radius-bottomright: 2px;
		-moz-border-radius-bottomleft: 2px;
		border-bottom-right-radius: 2px;
		border-bottom-left-radius: 2px;
		
		box-shadow: 0 1px 3px #998c4c;
	}

#new textarea,
#lists .edit textarea {
	border: 1px solid #ccc;
	border-radius: 2px;
	line-height: 18px;
	padding: 8px;
	display: block;
	resize: none;
	outline: none;
	
	min-height: 18px;
	min-width: 240px;
}

	#new textarea:hover,
	#new textarea:focus,
	#lists .edit textarea:hover,
	#lists .edit textarea:focus {
		box-shadow: 0 1px 1px #e5e5e5;
	}

	#new textarea:focus,
	#lists .edit textarea:focus {
		border-color: #3091F2;
	}
	
#lists {
	margin-top: 40px;
}

#lists .due li,
#lists .date li,
#lists .other li,
#lists .title {
    margin-top: 1px;
}

#lists .due li p,
#lists .date li p,
#lists .other li p,
#lists .title {
	float: left;
	padding: 8px;
	border: 1px solid #fff;
	border-radius: 2px;
    display: inline-block;
    margin-left: -10px;
    padding-left: 34px
}

#lists .due li:last-child,
#lists .date li:last-child,
#lists .other li:last-child {
	margin-bottom: 20px
}

#lists .title {
	margin-top: 10px

}

	#lists .drag {
        display: inline-block;
        visibility: hidden;
		background-position: -20px 0px;
		margin: -4px 3px -6px -48px;
		width: 20px;
		height: 20px;
		opacity: .4;
		/*cursor: n-resize;*/
	}

    #lists .due li p:hover,
    #lists .date li p:hover,
    #lists .other li p:hover {
			margin-left: -26px;
		}

		#lists .title:hover {	
			margin-left: -26px;
		}

        #lists .due li p:hover .drag,
        #lists .date li p:hover .drag,
        #lists .other li p:hover .drag,
        #lists .title:hover .drag {
			display: inline-block;
		}
		
		#lists .drag:hover {
			opacity: .6;
		}
	
	#lists label {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
		margin: 0 8px -4px 0;
		background: #fff;
		border-radius: 2px;
		
		background: -webkit-linear-gradient(#f2f2f2, #e5e5e5);
		box-shadow: inset 0 1px 1px #999999;
	}
	
		#lists label:hover {
			background: -webkit-linear-gradient(#f5fcff, #e5e5e5);
			box-shadow: inset 0 1px 1px #808080;			
		}

    #lists .due li p:hover,
    #lists .date li p:hover,
    #lists .other li p:hover {
		padding-left: 50px;
	}

	#lists .title:hover {	
		padding-left: 50px;
	}
		
	#lists .title {
		font-weight: bold;
	}
	
	#lists .due,
	#lists .date,
	#lists .other{
	}	
	
	#lists p>em {
		margin-left: 5px;
		color: #999;
	}	
	
		#lists .due p>em {
			color: #cc3d3d;
		}
		
	#lists .edit {
		display: none;
	}		

		#lists .editing>p {
            display: none !important;
		}	
		
		#lists .editing {
			padding: 0 !important;
            margin: 0px 0 -1px -2px !important;
			border: none !important;
		}	
		
		#lists .editing .edit {
            display: inline-block !important;
			position: relative;
			padding: 0 !important;
			margin: 0 !important;
		}	
		
		#lists .editing .edit textarea {
			padding-left: 32px;
			margin-left: -9px !important;
		}		
		
			#lists .editing .title.edit textarea {
				padding-left: 8px;
			}	
		
		#lists .editing .edit button {
			position: absolute;
			top: 7px;
			left: -2px;
			border: 1px solid #ccc;
			border-radius: 2px;
			
			background: -webkit-linear-gradient(#fff, #f3f3f3);
		}		

			#lists .editing .edit button:hover {
				box-shadow: 0 1px 1px #e5e5e5;			
			}	
			
			#lists .editing .edit button:active {
				border-color: #c0c0c0;
				box-shadow: inset 0 1px 1px #ccc;			
				background: #f2f2f2;
			}	
			
			#lists .editing .edit button em {
				background-position: -40px 0;
				display: block;
				width: 20px;
				height: 20px;
			}	
			
				#lists .editing .edit button:hover em {
					background-position: -60px 0;
				}
		
	#lists .dragging p {
		opacity: .3;
		border: 1px dashed #808080 !important;
	} 		
	
	#lists .drag-to {
		border: 1px dashed #3297fd !important;
		padding: 0 !important;
		margin: 1px 0 0 -9px !important;
	} 
	
	.person {
		background-position: -20px -20px !important;
		margin: 0 6px -5px -2px;
		display: inline-block;
		width: 20px;
		height: 20px
	}
	
	.check {
		display: none;
		background-position: 0 -20px;		
		position: absolute;
		width: 18px;
		height: 18px;
		top: -4px;
		left: 0px;
	}
		
		.checked .check {
			display: block;	
		}

